<template>
	<view>
		<view class="title">
			近期热梗
		</view>
		<SearchInput @publish="onPublish"></SearchInput>
		<view class="main">
			<HotList :lists=lists @del="onDel"></HotList>
		</view>
		<GoTop :rollValue=rollValue @goTop="goTop"></GoTop>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	const lists = ref([{
			id: 111,
			title: "刚满18岁"
		},
		{
			id: 222,
			title: "我不吃牛肉"
		},
		{
			id: 333,
			title: "遥遥领先"
		},
		{
			id: 444,
			title: "哪里贵了"
		}
	])

	function onDel(e) {
		lists.value.splice(e, 1)
	}

	function onPublish(e) {
		lists.value.push({
			id: Date.now(),
			title: e
		})
	}

	const rollValue = ref(0)

	onPageScroll((e) => {
		rollValue.value = e.scrollTop
	})

	function goTop() {
		uni.pageScrollTo({
			scrollTop: 0, // 滚动到顶部
			duration: 300 // 滚动动画持续时间，单位 ms
		});
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 26px;
		text-align: center;
		color: #3c3c3c;
		padding: 30px 0 15px;
	}
	SearchInput{
		
	}
	HotList{
		height: 50px;
	}
	.main{
		
	}
</style>